<template>
  <div class="login">
    <div class="login_top flex items-center">
      <img
        src="@/assets/img/icon_logo.png"
        style="width: 152px; height: 40px"
      />
      <span class="mx-4px">|</span>
      <span>运营管理平台</span>
    </div>
    <div class="login_main">
      <img
        src="@/assets/img/login_img_dl.png"
        style="width: 558px; height: 575px"
      />
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <p class="text-center text-24px mb-24px">账号密码登陆</p>
        <el-form-item prop="username" label="账号/User">
          <el-input
            v-model.trim="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="请输入账号"
          >
            <item slot="prefix" icon="account" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码/Password">
          <el-input
            v-model.trim="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="请输入密码"
            @keyup.enter.native="handleLogin"
          >
            <!-- <svg-icon slot="prefix" icon-class="password" /> -->
            <item slot="prefix" icon="password" />
          </el-input>
        </el-form-item>
        <el-checkbox
          v-model.trim="loginForm.rememberMe"
          style="margin: 0rem 0rem 0.25rem 0rem"
          >记住密码</el-checkbox
        >
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click.native.prevent="handleLogin"
            class="submitBut"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Item from "@/layout/components/Sidebar/Item.vue";
export default {
  components: { Item },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$router.push({ path: "/index" });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.svg-icon[data-v-c8a70580] {
  width: 20px;
  height: 20px;
}
</style>
<style lang="scss">
.login {
  background: #e9eef6;
  height: 100vh;
  width: 100%;
  padding: 32px 44px;
  display: flex;
  flex-direction: column;
  .login_top {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6f7583;
  }
  .login_main {
    flex: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .login-form {
      width: 430px;
      height: 450px;
      background: #ffffff;
      box-shadow: 5px 5px 10px 0px rgba(192, 202, 225, 0.1);
      border-radius: 12px;
      padding: 32px 60px;
      text-align: left;
      margin-left: 366px;
      .el-form-item { 
        .el-input {
          height: 32px;
          border: 1px solid #f0f0f0;
          background: #f5f5f5;
          border-radius: 0;
          display: flex;
          align-items: center;
          position: relative;
          .el-input__inner {
            background: #f5f5f5;
            height: 100%;
            border: 0;
          }
          .el-input__prefix {
            left: 8px;
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
      }

      .input-icon {
        margin-left: 8px;
      }

      .el-form-item__label:before {
        content: "" !important;
      }
      .el-form-item__label {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
      .submitBut {
        margin-top: 32px;
        width: 4rem;
        height: 40px;
        background: #1d6fe9;
        border-radius: 8px;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
</style>
